<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue源码剖析</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="demo">
        <h1>初始化流程</h1>
        <p>{{foo}}</p>
    </div>
    <script>
        // 创建实例 
        const app = new Vue({
            // 将内容追加到宿主元素，例如#demo
            el: '#demo',
            data: {
                foo: 'DOM还未开始渲染'
            },
            // 在初始化阶段，只会有beforeCreate；       事件，生命周期开始
            // created；beforeMount；mounted  这四个钩子触发
            beforeCreate() { console.log('beforeCreate') },
            // created输出el，用来判断是否存在dom
            // 结果：created表示完成数据观测，属性和方法的运算，
            //初始化事件，$el属性还没有显示出来。       
            created() { console.log('created ' + this.$el) },
            // 进行事件转换之前进行 beforeMount() 操作
            beforeMount() { console.log('beforeMount') },
            // mounted输出el，用来判断是否存在dom
            // 结果：DOM渲染在mounted中就已经完成了。
            mounted() {
                //挂载监控事件更新  通知用户可以访问DOM
                setTimeout(() => {
                    this.foo = 'DOM渲染进行完成'
                }, 2000);
                console.log('mounted ' + this.$el)
            },
            // 关于更新的钩子：beforeUpdate与updated： 
            // 只要程序不更新其实关于更新的钩子不会触发
            //dom更新之前
            beforeUpdate() { console.log('beforeUpdate') },
            //更新完成后，进行操作
            updated() { console.log('updated') },
            // 接下来进行销毁操作
            // beforeDestory()
            // 完成销毁
            // destroyed()
        });
        // beforeCreate(){} // 执行时组件实例还未创建，通常用于插件开发中执行一些初始化任务 
        // created(){} // 组件初始化完毕，各种数据可以使用，常用于异步数据获取 
        // beforeMount(){} // 未执行渲染、更新，dom未创建 
        // mounted(){} // 初始化结束，dom已创建，可用于获取访问数据和dom元素 
        // beforeUpdate(){} // 更新前，可用于获取更新前各种状态 
        // updated(){} // 更新后，所有状态已是最新 
        // beforeDestroy(){} // 销毁前，可用于一些定时器或订阅的取消 destroyed(){} // 组件已销毁，作用同上
    </script>
</body>

</html>